@charset "UTF-8";
@bgcolor: #2a3542;
@whitecolor: #FFFFFF;
@greycolor: #A3A3A3;
//登录
.cms-login{
    background: @bgcolor;
    height: calc(100vh);
    overflow: hidden;
    .cms-login-form{
        width: 380px;
        padding-top: calc(100vh - 100vh*0.75);
        margin: auto;
    }
    .cms-login-title{
        color: @whitecolor;line-height: 35px;
        span{
            font-size: 16px;
            font-weight: 700;margin-right: 10px;
        }
    }
    .cms-login-note,.refresh-captcha{
        color: @greycolor;font-size: 12px;margin-bottom: 25px;
    }
    .cms-login-captcha{
        height: 40px;float: right;cursor: pointer;border-radius: 4px;
    }
    .cms-login-btn{
        width: 100%;font-size: 16px;
    }
}
//菜单
.cms-menu{
    width: 180px;
    overflow: hidden;
    height: 100%;
    position: fixed;
    left:0;
    background: @bgcolor;
}
//头部
.cms-header{
    background: @bgcolor;
    width: 100%;height: 65px;line-height: 65px;
    top:0;right: 0;overflow: hidden;z-index: 1002;
    position: fixed;
    .cms-header-logo{
        float:left;text-align: center;width: 180px;
        img{
            width: 140px;position: relative;top:12px;
        }
    }
    .cms-header-breadcrumb{
        float:left;margin-left: 15px;
    }
    .cms-header-user{
        padding-right: 15px;
        float:right;
        .user-menu{
            color: @whitecolor;
        }
    }
}
//布局
.cms-main{
    padding-top: 65px;
    .el-container{
        margin-left: 180px;
        position: relative;
    }
    .cms-content{
        min-height: calc(100vh - 125px);
        .cms-btn-group{
            margin-bottom: 15px;
        }
        .cms-search-group{
            margin-bottom: 10px;
            display: inline-block;
            width: 100%;
            text-align: right;
            .cms-search-item{
                float: right;
                margin-left: 10px;
            }
        }
    }
}
//分页
.cms-pagination{
    text-align: right;width: 100%;height: 60px;line-height: 70px;
    .cms-pagination-total{
        float: left;
        font-size: 14px;
        em{
            color: red;font-weight: 700;
        }
    }
}
//尾部
.cms-footer{
    text-align: center;height: 45px;line-height: 45px;
}

//路由过渡动画
.slide-fade-enter-active {
    transition: all .3s ease;
}
.slide-fade-leave-active {
    transition: all .5s ease-in-out;
}

.slide-fade-leave-to {
    opacity: 0;
    -webkit-transform: translate(0, 8%);
    transform: translate(0, 8%);

}
.slide-fade-enter{
    opacity: 0;
    -webkit-transform: translate(0, -5%);
    transform: translate(0, -5%);
}
//公众号菜单
.phone{
    background-image: url(./../phone.png);
    background-repeat: no-repeat;
    background-size:100% 100%;
    height: 600px;
    padding: 75px 16px;
    box-sizing: border-box;
    width: 345px;
    display: inline-block;
}
.add-menu{
    padding: 13px 35px;
    line-height: 55px;
    text-align: center;
    position: relative;
    right: 145px;
    border: 1px solid #313538;
    bottom: 51px;
    border-radius: 5px;
    cursor: pointer;
}
.add-menu:after,.add-menu:before {
    width: 0;
    height: 0;
    left: 114px;
    top: 10px;
    border: 10px solid transparent;
    border-left-color: #313538;
    position: absolute;
    content: "";
}
.add-menu:before{
    top: 10px;
    left: 112px;
    z-index: 1;
    border-left-color: #fff;
}
.phone-contnet{
    background: #fff;height: 435px;
}
.phone-contnet-title{
    background-image: url(./../titlebar.png);
    background-repeat: no-repeat;
    background-size:100% 100%;
    height: 55px;
    width: 100%;
}
.phone-menu{
    position: relative;top: 330px;
}
.phone-menu ul{
    list-style: none;-webkit-padding-start:0px;
}
.phone-menu ul li{
    width: 100%;text-align: center;position: relative;
    color: #333;
    background: #d5d5d5;
    height: 50px;
    line-height: 50px;float: left;    border-left: 1px solid #c1c1c1; cursor: pointer;
}
.phone-menu ul li.li-two{
    width: 49.6%;
}
.phone-menu ul li.li-three{
    width: 33%;
}
.menu-close{
    position: absolute;
    float: right;font-size: 12px;font-weight: 300;color: #fff;width: 15px;
    top:0px;
    right:0px;
    height: 15px;text-align: center;
    line-height: 15px;    font-style: normal;
    background: rgba(0,0,0,.5);border-radius: 50%;
    display: none;//
}
.menu-close:before{
    content: "\2716";
}
.phone-menu ul li:hover .menu-close{
    display: block;
}
.phone-menu-childs{
    //padding:0 10px;
    position: absolute;width: 100%;
    bottom: 60px;
}
.phone-menu-childs p{
    border-top:1px solid #ddd;
}
.childs-add:after,.childs-add:before {
    width: 0;
    height: 0;
    bottom: -19px;left: 47%;
    border: 10px solid transparent;
    border-top-color: #ddd;
    position: absolute;
    content: "";
}
.childs-add:before{
    bottom: -17px;
    z-index: 1;left: 47%;
    border-top-color: #fff;
}


.li-two .childs-add:after,.li-two .childs-add:before {
    left: 44%;
}
.li-two .childs-add:before{
    left: 44%;
}
.li-three .childs-add:after,.li-three .childs-add:before {
    left: 41%;
}
.li-three .childs-add:before{
    left: 41%;
}
.phone-menu-childs .childs-item{
    border: 1px solid #ddd;border-radius: 5px;
}
.phone-menu-childs p{
    height: 35px;line-height: 35px;    margin: 0;text-align: center;
    border-bottom: none;position: relative;
}
.menu-child-close{
    position: absolute;
    float: right;font-size: 12px;font-weight: 300;color: #fff;width: 15px;
    top: -4px;
    right: -3px;
    height: 15px;text-align: center;
    line-height: 15px;    font-style: normal;
    background: rgba(0,0,0,.5);border-radius: 50%;
    display: none;//none
}
.menu-child-close:before{
    content: "\2716";
}
.childs-item p:hover .menu-child-close{
    display: block;
}
.panel-heading {
    border-color: #eff2f7;
    font-size: 16px;
    font-weight: 600;
    padding: 5px 0;
}
.cms-left-btn {
    float: left;
}
//.avatar-uploader,.avatar-uploader-icon{
//    width: 80px;height: 80px;border-radius: 50%;line-height: 80px;overflow: hidden;text-align: center;
//    border: 1px dashed #ccc;
//}
//
//.back-uploader,.back-uploader-icon {
//    font-size: 28px;
//    color: #8c939d;
//    width: 128px;
//    height: 128px;
//    line-height: 128px;border: 1px dashed #ccc;
//    text-align: center;
//}
//.index-avatar-uploader .el-upload {
//
//    border-radius: 6px;
//    cursor: pointer;
//    position: relative;
//    overflow: hidden;
//}
//
//.index-avatar-uploader-icon,.index-avatar-uploader img{
//    border: 1px dashed #d9d9d9;
//    font-size: 28px;
//    color: #8c939d;
//    width: 360px;
//    height: 288px;
//    line-height: 288px;
//    text-align: center;
//}
//丝带
.ribbon {
    position: relative;
    color: white;
}
.ribbon6 {
    text-align: center;
    width: 40px;
    font-size: 13px;
    height: 20px;
    line-height: 28px;
    position: absolute;
    top: -2px;
    left: -13px;
    z-index: 2;
    overflow: hidden;
    transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    box-shadow:0 0 0 3px red,  0px 21px 5px -18px rgba(0,0,0,0.6);
    background: red;
}
.index-avatar-uploader .el-upload {
    border-radius: 3px;
    cursor: pointer;
}

.index-avatar-uploader-icon {
    border: 1px dashed #d9d9d9;
    font-size: 28px;
    color: #8c939d;
    width: 250px;
    height: 166px;
    line-height: 166px;
    text-align: center;
}
.index-avatar{
    width: 250px;
    height: 166px;
    border-radius: 3px;
}
.index-project-uploader .el-upload {
  border-radius: 3px;
  cursor: pointer;
}

.index-project-uploader-icon {
  border: 1px dashed #d9d9d9;
  font-size: 28px;
  color: #8c939d;
  width: 180px;
  height: 180px;
  line-height: 180px;
  text-align: center;
}
.index-project{
  width: 180px;
  height: 180px;
  border-radius: 3px;
}
.index-college-uploader .el-upload {
  border-radius: 3px;
  cursor: pointer;
}

.index-college-uploader-icon {
  border: 1px dashed #d9d9d9;
  font-size: 28px;
  color: #8c939d;
  width: 200px;
  height: 250px;
  line-height: 180px;
  text-align: center;
}
.index-college{
  width: 200px;
  height: 250px;
  border-radius: 3px;
}